

import 'package:flutter/material.dart';
import 'package:moonplay/common/app_common.dart';
import 'package:moonplay/pages/common_page/common_text_page.dart';
import 'package:moonplay/widgets/common_widget.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class FourPage extends StatefulWidget {
  @override
  _FourPageState createState() => _FourPageState();
}

class _FourPageState extends State<FourPage> with SingleTickerProviderStateMixin {
  RefreshController _refreshController = RefreshController(initialRefresh: false);
  double alphaAppBar = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  _onScroll (offset) {
    ///可定义滚动多远时长触发显示导航栏
    if(offset > 40) {
      double alpha = (offset-40) / 40;
      if (alpha < 0) {
        alpha = 0;
      } else if (alpha > 1) {
        alpha = 1;
      }
      setState(() {
        alphaAppBar = alpha;
      });
    } else {
      setState(() {
        alphaAppBar = 0.0;
      });
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: bodyWidget()
    );
  }

  Widget bodyWidget(){
    return Stack(
      children: <Widget>[
        MediaQuery.removePadding(
          removeTop: true,
          context: context,
          child: NotificationListener(
            onNotification: (scrollNotification) {
              if (scrollNotification is ScrollUpdateNotification) {
                _onScroll(scrollNotification.metrics.pixels);
              }
              return false;
            },
            child: widgetListView()
          )
        ),
        Opacity(
          opacity: alphaAppBar,
          child: 
          alphaAppBar > 0.01 ?
          Container(
            height: ScreenUtil().getWidthPx(88) + ScreenUtil.getInstance().statusBarHeight,
            child: commonAppbar(context, title: '我的', isBackIcon: false, listActions: listActions()),
          )
          : Container()
        )
      ],
    );
  }

  List<Widget> listActions(){
    return [
      // InkResponse(
      //   onTap: (){
      //     LogUtil.e('点击扫码');
      //   },
      //   child: Container(
      //     width: ScreenUtil().getWidthPx(80),
      //     height: ScreenUtil().getWidthPx(100),
      //     child: CommonStyle.icons(0xe8ba, iconColor: Colors.white, iconSize: 22),
      //   ),
      // ),
      InkResponse(
        onTap: (){
          Get.toNamed("/SetTingPage");
        },
        child: Container(
          width: ScreenUtil().getWidthPx(80),
          height: ScreenUtil().getWidthPx(100),
          child: CommonStyle.icons(0xe909, iconColor: Colors.white, iconSize: 22),
        ),
      )
    ];
  }

  Widget widgetListView(){
    return SmartRefresher(
      controller: _refreshController,
      enablePullDown: true,
      enablePullUp: false,    //开启上拉加载
      child: buildCtn(),
      onRefresh: () async {
        await Future.delayed(Duration(milliseconds: 1000));
        _refreshController.refreshCompleted();
      },
    );
  }

  Widget buildCtn(){
    return ListView(
      physics: ClampingScrollPhysics(),
      children: <Widget>[
        appbarWidget(),
        header(),
        listWidget(),
      ],
    );
  }

  Widget appbarWidget(){
    return Container(
      height: ScreenUtil().getWidthPx(100),
      margin: EdgeInsets.only(top: ScreenUtil.getInstance().statusBarHeight),
      padding: EdgeInsets.only(right: ScreenUtil().getWidthPx(20)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          // InkResponse(
          //   onTap: (){
          //     LogUtil.e('点击扫码');
          //   },
          //   child: Container(
          //     width: ScreenUtil().getWidthPx(80),
          //     height: ScreenUtil().getWidthPx(100),
          //     child: CommonStyle.icons(0xe8ba),
          //   ),
          // ),
          InkResponse(
            onTap: (){
              Get.toNamed("/SetTingPage");
            },
            child: Container(
              width: ScreenUtil().getWidthPx(80),
              height: ScreenUtil().getWidthPx(100),
              child: CommonStyle.icons(0xe909),
            ),
          )
        ],
      ),
    );
  }

  Widget header(){
    return Container(
      width: double.infinity,
      height: ScreenUtil().getWidthPx(340),
      margin: EdgeInsets.symmetric(horizontal: 20),
      decoration: BoxDecoration(
        color: Color(0xff77d8a4),
        borderRadius: BorderRadius.all(Radius.circular(15))
      ),
      child: Column(
        children: [
          Container(
            width: double.infinity,
            height: ScreenUtil().getWidthPx(140),
            alignment: Alignment.center,
            child: Stack(
              children: [
                Positioned(
                  top: 0,
                  left: 0,
                  right: 0,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        width: ScreenUtil().getWidthPx(140),
                        height: ScreenUtil().getWidthPx(140),
                        transform: Matrix4.translationValues(0, -ScreenUtil().getWidthPx(60), 0),
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.all(Radius.circular(140)),
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(40),
                          child: loadNetworkImage('http://app.ydecai.cn/upload/vod/placeholder.png'),
                        ),
                      ),
                    ],
                  )
                ),
                Positioned(
                  top: ScreenUtil().getWidthPx(60),
                  left: 0,
                  right: 0,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        width: ScreenUtil().getWidthPx(110),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          color: Color(0xff424251),
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),
                        child: Cmtext('白银', style: TextStyle(fontSize: 10, color: Color(0xffe8deb3)),),
                      )
                    ],
                  ),
                ),
                Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Container(
                    alignment: Alignment.center,
                    child: Cmtext('小明', style: TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.w600)),
                  )
                ),
              ],
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              width: double.infinity,
              alignment: Alignment.center,
              child: Cmtext('这家伙很懒,什么都没留下', style: TextStyle(fontSize: 13, color: Color(0xffd3f2e9))),
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              width: double.infinity,
              alignment: Alignment.center,
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Cmtext('1000', style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600),),
                        SizedBox(height: 2,),
                        Cmtext('高手币', style: TextStyle(fontSize: 13, color: Color(0xffd3f2e9))),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Cmtext('400', style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600)),
                        SizedBox(height: 2,),
                        Cmtext('我的积分', style: TextStyle(fontSize: 13, color: Color(0xffd3f2e9))),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Cmtext('3', style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600)),
                        SizedBox(height: 2,),
                        Cmtext('优惠券', style: TextStyle(fontSize: 13, color: Color(0xffd3f2e9))),
                      ],
                    ),
                  ),
                ],
              )
            ),
          ),
        ],
      )
    );
  }

  Widget listWidget(){
    return Column(
      children: [
        SizedBox(height: ScreenUtil().getWidthPx(20),),
        Container(
          height: ScreenUtil().getWidthPx(20),
          color: Color(0xfff8f8f8),
        ),
        CommonListPage(
          leftText: Cmtext('历史记录', style: TextStyle(fontSize: 14),),
          onTap: (){
            Get.toNamed("/HistoryPage");
          }
        ),
        // CommonListPage(
        //   leftText: Cmtext('意见反馈', style: TextStyle(fontSize: 14),),
        //   onTap: (){

        //   }
        // ),
      ],
    );
  }
}